<template>
    <view class="secretaryGeneral_outer">
        <view class="secretaryGeneral_header">
            <image src="@/static/upgradeLaborUnion/back.png"></image>
        </view>
        <view class="secretaryGeneral_title"><text>升级工会</text></view>
        <view class="secretaryGeneral_content">
            <view class="secretaryGeneral_content_top">
                <view class="secretaryGeneral_content_top_tab_box">
                    <view class="secretaryGeneral_content_top_tab_inner" v-for="item, index in selectTabArr" :key="index"
                        :class="selectTabIndex == index ? 'active' : ''">{{ item }} <view class="line"
                            v-if="selectTabIndex == index">
                        </view>
                    </view>
                </view>
                <view class="secretaryGeneral_content_top_table">
                    <view class="secretaryGeneral_content_top_table_item" v-for="item, index in secretaryGeneralArr"
                        :key="index"
                        :style="index % 2 == 0 ? 'background: rgb(255, 168, 77, 0.15);' : 'background: rgb(255, 168, 77, 0.08);'">
                        <text>{{ item.id }}</text>
                        <text>{{ item.price }}</text>
                    </view>
                </view>
                <view class="secretaryGeneral_content_top_isadd">
                    <view class="secretaryGeneral_content_top_isadd_box">
                        <text class="secretaryGeneral_content_top_isadd_box_left">当前还可添加1个秘书长</text>
                        <text class="secretaryGeneral_content_top_isadd_box_right" @click="openPop(1)">[增加席位]</text>
                    </view>
                </view>
            </view>
            <view class="secretaryGeneral_content_center">
                <view class="secretaryGeneral_content_center_search">
                    <view class="secretaryGeneral_content_center_search_ipt">
                        <u--input placeholder="请填写用户ID" border="none" customStyle="margin-left: 38rpx;"></u--input>
                    </view>
                    <view class="secretaryGeneral_content_center_search_btn"><text>查询</text></view>
                </view>
                <view class="secretaryGeneral_content_center_user">
                    <u-avatar src="" size="30rpx" class="secretaryGeneral_content_center_user_avatar"></u-avatar>
                    <text class="secretaryGeneral_content_center_user_text">用户名称</text>
                </view>
            </view>
            <!-- 给按钮占位 -->
            <!-- <view style="height: 660rpx;"></view> -->
            <view class="secretaryGeneral_content_down">
                <view class="secretaryGeneral_content_down_btn" @click="openPop(0)"><text>提交</text></view>
            </view>
        </view>
        <u-popup :show="isShowSecretaryGeneralPop" @close="isShowSecretaryGeneralPop = false" round="46rpx"
            :closeable="true">
            <view class="secretary_general_box" v-if="isShowSecretaryGeneralIndex == 0">
                <text class="secretary_general_box_top">您确定添加用户</text>
                <view class="secretary_general_box_center">
                    <text class="secretary_general_box_id">ID:123456</text>
                    <text>为秘书长吗</text>
                </view>
                <view class="secretary_general_box_down"><text>确认</text></view>
            </view>
            <view class="secretary_general_box" v-if="isShowSecretaryGeneralIndex == 1">
                <text class="secretary_general_box_top">增加一个秘书长席位需要销毁</text>
                <view class="secretary_general_box_center">
                    <text class="secretary_general_box_id">50000云豆</text>
                </view>
                <view class="secretary_general_box_down"><text>立即添加</text></view>
            </view>
        </u-popup>
    </view>
</template>

<script>
export default {
    data() {
        return {
            selectTabIndex: 0,
            selectTabArr: ['用户ID', '库存'],
            // 秘书长数据列表
            secretaryGeneralArr: [
                {
                    id: 23443534535,
                    price: 323489.56
                },
                {
                    id: 34545,
                    price: 3489.56
                },
                {
                    id: 666666,
                    price: 323489.56
                },
                {
                    id: 33333333,
                    price: 666489.56
                },
            ],
            // 是否显示弹出层
            isShowSecretaryGeneralPop: false,
            // 弹出层内容   0：添加秘书长，1：添加秘书长席位
            isShowSecretaryGeneralIndex: 1,
        }
    },
    methods: {
        // 打开弹出层
        openPop(val) {
            this.isShowSecretaryGeneralPop = true
            this.isShowSecretaryGeneralIndex = val
        },
    }
}
</script>

<style lang="scss" scoped>
.secretaryGeneral_outer {
    width: 100vw;
    min-height: 100vh;
    background: linear-gradient(180deg, #FF7A12 0%, #FFA345 100%);
    display: flex;
    flex-direction: column;

    .secretaryGeneral_header {
        image {
            width: 46rpx;
            height: 46rpx;
            margin-top: 74rpx;
            margin-left: 34rpx;
        }
    }

    .secretaryGeneral_title {
        margin-top: 60rpx;
        margin-left: 34rpx;

        text {
            font-size: 46rpx;
            font-family: DreamHanSansSC, DreamHanSansSC;
            font-weight: 600;
            color: #FFFFFF;
        }
    }

    .secretaryGeneral_content {
        flex: 1;
        width: 100vw;
        background: #FFFAEF;
        border-radius: 45rpx 45rpx 0rpx 0rpx;
        margin-top: 26rpx;

        .secretaryGeneral_content_top {

            .secretaryGeneral_content_top_tab_box {
                display: flex;
                justify-content: space-around;
                margin-top: 64rpx;

                .secretaryGeneral_content_top_tab_inner {
                    font-size: 36rpx;
                    font-family: DreamHanSansSC, DreamHanSansSC;
                    font-weight: 600;
                    color: #9B958D;
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    .line {
                        width: 87rpx;
                        height: 8rpx;
                        background: #FF8C28;
                        border-radius: 4rpx;
                        margin-top: 12rpx;
                    }
                }

                .active {
                    color: #37322C;
                    display: flex;
                }


            }

            .secretaryGeneral_content_top_table {
                width: 100vw;
                display: flex;
                flex-direction: column;
                align-items: center;
                row-gap: 6rpx;
                margin-top: 22rpx;

                .secretaryGeneral_content_top_table_item {
                    width: 642rpx;
                    height: 64rpx;

                    text {
                        font-size: 28rpx;
                        font-family: DreamHanSansSC, DreamHanSansSC;
                        font-weight: normal;
                        color: #5A564D;
                        width: 50%;
                        display: inline-block;
                        text-align: center;
                        line-height: 64rpx;
                    }
                }

            }

            .secretaryGeneral_content_top_isadd {
                display: flex;
                justify-content: center;
                margin-top: 38rpx;

                .secretaryGeneral_content_top_isadd_box {
                    width: 642rpx;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .secretaryGeneral_content_top_isadd_box_left {
                        font-size: 28rpx;
                        font-family: DreamHanSansSC, DreamHanSansSC;
                        font-weight: normal;
                        color: #5A564D;
                    }

                    .secretaryGeneral_content_top_isadd_box_right {
                        font-size: 28rpx;
                        font-family: DreamHanSansSC, DreamHanSansSC;
                        font-weight: normal;
                        color: #FE8323;
                    }
                }
            }
        }

        .secretaryGeneral_content_center {
            display: flex;
            flex-direction: column;
            align-items: center;

            .secretaryGeneral_content_center_search {
                display: flex;
                align-items: center;
                width: 642rpx;
                justify-content: space-between;
                margin-top: 90rpx;

                .secretaryGeneral_content_center_search_ipt {
                    width: 508rpx;
                    height: 104rpx;
                    background: #FFFAEF;
                    border-radius: 26rpx;
                    border: 4rpx solid #FF9E3C;
                    display: flex;
                    align-items: center;
                }

                .secretaryGeneral_content_center_search_btn {
                    width: 118rpx;
                    height: 108rpx;
                    background: linear-gradient(180deg, #5E5950 0%, #545047 100%);
                    border-radius: 26rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    text {
                        font-size: 28rpx;
                        font-family: DreamHanSansSC, DreamHanSansSC;
                        font-weight: 600;
                        color: #FFFAEF;
                    }
                }
            }

            .secretaryGeneral_content_center_user {
                width: 100%;
                display: flex;
                align-items: center;
                margin-top: 26rpx;

                .secretaryGeneral_content_center_user_avatar {
                    margin-left: 84rpx;
                }

                .secretaryGeneral_content_center_user_text {
                    font-size: 28rpx;
                    font-family: DreamHanSansSC, DreamHanSansSC;
                    font-weight: normal;
                    color: #5A564D;
                    margin-left: 12rpx;
                }
            }
        }

        .secretaryGeneral_content_down {
            width: 100vw;
            display: flex;
            justify-content: center;
            position: relative;
            height: 600rpx;

            .secretaryGeneral_content_down_btn {
                width: 661rpx;
                height: 108rpx;
                background: linear-gradient(90deg, #FF6B00 0%, #FFAD4C 100%);
                border-radius: 38rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                position: absolute;
                bottom: 108rpx;

                text {
                    font-size: 38rpx;
                    font-family: DreamHanSansSC, DreamHanSansSC;
                    font-weight: 600;
                    color: #FFFFFF;
                }
            }
        }
    }

    .secretary_general_box {
        width: 100vw;
        height: 498rpx;
        background: #FFFAEF;
        border-radius: 46rpx 46rpx 0rpx 0rpx;
        display: flex;
        flex-direction: column;
        align-items: center;

        .secretary_general_box_top {
            margin-top: 92rpx;
        }

        .secretary_general_box_center {
            margin-top: 24rpx;

            .secretary_general_box_id {

                color: #FE8323;
            }
        }

        .secretary_general_box_down {
            width: 662rpx;
            height: 108rpx;
            background: linear-gradient(90deg, #FF6B00 0%, #FFAD4C 100%);
            border-radius: 38rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 70rpx;

            text {
                font-size: 38rpx;
                font-family: DreamHanSansSC, DreamHanSansSC;
                font-weight: 600;
                color: #FFFFFF;
            }
        }

        text {
            font-size: 42rpx;
            font-family: DreamHanSansSC, DreamHanSansSC;
            font-weight: 600;
            color: #5A564D;
        }
    }
}
</style>